import React, { Component } from 'react'
import {Table,Button,Input,Modal,Select} from 'antd'
import request from '../../util/request'

const { Option } = Select;



export default class scoreManger extends Component {
    state = {
        list:[],         //成绩列表
        visible: false,  //控制弹窗显示隐藏
        notScore:[],     //今日没有录入成绩的人员名单
        theory:0,        //理论成绩
        skill:0,         //技能成绩
        num:'',          //学号   
        username:'',     //姓名
        id:'',           //编辑id
        key:''           //搜索的关键词
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        //编辑  添加
        console.log(e);
        //1.容错处理
        let {theory,skill,username,num,id} = this.state;
        if((theory<=100 && theory>=0) && (skill<=100 && skill>=0) ){
            let type = id ? 'put' :'post';
            let url = id ? `/api/score/${id}` :'/api/score';
            //2.调添加接口
            request[type](url,{theory,skill,username,num}).then(res => {
                console.log(res);
                if(res.code === 1){
                    //获取列表
                    this.getList();
                    this.setState({
                        theory:0,
                        skill:0,
                        username:'',
                        num:'',
                        notScore:[],
                        id:''
                    })
                }
            })
        }else{
            alert("参数有误")
        }
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
            id:'',
            username:'',
            theory:0,
            skill:0,
            num:''
        });
    };

    getList = () => {
        request.get('/api/score').then(res => {
            if(res.code === 1){
                this.setState({
                    list:res.data
                })
            }
        })
    }

    componentDidMount(){
        //获取成绩列表
        this.getList();
    }
    render() {
        let {list,notScore,theory,skill,username,key,id} = this.state;
        const columns = [
            {
              title: '姓名',
              dataIndex: 'username',
            },
            {
              title: '理论',
              dataIndex: 'theory',
            },
            {
              title: '技能',
              dataIndex: 'skill',
            },
            {
                title: '操作',
                render: (obj) => <div>
                        <Button onClick={() => {this.edit(obj)}}>编辑</Button>
                        <Button onClick={() => {this.del(obj.id)}}>删除</Button>
                    </div>
            }
        ];
        return (
            <div>
                <div>
                    <div>
                        姓名：<Input type="text" name="key"  value={key} onChange={this.onIpt}/> 
                        <Button onClick={this.search}>搜索</Button>
                    </div>
                    <Button onClick={this.add}>添加</Button>
                </div>
                <Table columns={columns} dataSource={list} size="middle" rowKey="id"
                    pagination={{
                        pageSize:4  //每页的条数
                    }}
                />
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    姓名：{id? <span>{username}</span> :<Select
                            style={{ width: 200 }}
                            placeholder="Select a person"
                            optionFilterProp="children"
                            onChange={this.onChange}
                            value={username}
                        >
                            {notScore.length && notScore.map((item,index) =>  <Option key={index} value={item.username}>{item.username}-{item.num}</Option>)}
                        </Select>}<br></br>
                    理论：<Input type="text" name="theory" value={theory} onChange={this.onIpt}></Input><br></br>
                    技能：<Input type="text" name="skill" value={skill} onChange={this.onIpt}></Input><br></br>
                </Modal>
            </div>
        )
    }

    //搜索
    search = () => {
        let {key} = this.state;
        if(key){
            request.get('/api/search',{key}).then(res => {
                if(res.code === 1){
                    this.setState({
                        list:res.data
                    })
                }
            })
        }else{
            //搜索关键词为空，把所有的数据全部查出来
            this.getList();
        }
    }

    //编辑
    edit = (obj) => {
        let {username,id,num,theory,skill} = obj;
        this.setState({
            visible:true,
            id,
            username,
            num,
            theory,
            skill
        })
    }

    //删除
    del = (id) => {
        console.log(id)
        request.delete(`/api/score/${id}`).then(res => {
            if(res.code == 1){
                this.getList();
            }
        })
    }

    onIpt = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //添加
    add = () => {
        //1.获取今日没有录入成绩的人员名单
        request.get('/api/notScore').then(res => {
            console.log(res);
            if(res.code === 1){
                if(res.data.length){
                    //2.把弹窗打开
                    this.setState({
                        visible: true,
                        notScore:res.data
                    });
                }else{
                    alert("成绩录入完毕")
                }
            }
        })
    }

    onChange = (value,option) =>{
        this.setState({
            username:value,
            num:option.children[2]
        })
    }
}
